<template>
  <view class="page-default">
    <c-nav-bar title="校园信息" type="white" bg-color="rgba(255,255,255,0.6)" />

    <view class="mx-2 rounded-lb-4 rounded-rb-4 pb-4">
      <view class="m-3 mt-6 rounded-2 bg-white px-4 line-height-6">
        <up-form ref="dataForm" label-position="left" label-width="auto" :model="dataForm" :rules="rules">
          <up-form-item label="修读专业" :border-bottom="true">
            <view class="flex-1 text-right text-#1A2B5C">
              中专专业-旅游服务与管理
            </view>
          </up-form-item>
          <up-form-item label="专业简称" :border-bottom="true">
            <view class="flex-1 text-right text-#1A2B5C">
              --
            </view>
          </up-form-item>
          <up-form-item label="班级名称" :border-bottom="true">
            <view class="flex-1 text-right text-#1A2B5C">
              1班
            </view>
          </up-form-item>
          <up-form-item label="校内学号" :border-bottom="true">
            <view class="flex-1 text-right text-#1A2B5C">
              2025LYZ101
            </view>
          </up-form-item>
          <up-form-item label="宿舍号" :border-bottom="false">
            <view class="flex-1 text-right text-#1A2B5C">
              女生公寓4-10
            </view>
          </up-form-item>
        </up-form>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// 响应式表单数据
const dataForm = ref({
  name: '',
  birthday: '',
});

// 校验规则
const rules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change'],
    },
  ],
};
</script>

<style lang="scss" scoped>
:deep(.u-line){
 border-bottom: 2px dashed #e0e7ec !important;
}

:deep(.uni-input-input){
  text-align: right;
}
:deep(.uni-input-placeholder ){
  text-align: right;
}
:deep(.uni-textarea-textarea){
  color: #000000;
}
:deep(.u-form-item__body__left__content__label){
  color: #6E7B8B;
}
</style>
